.box1 {
    width: 100px;
    height: 100px;
    background-color: rgb(148, 137, 245);
    position: relative;
    top: 100px;
    left: 100px;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: rgb(142, 217, 236);
    position: relative;
    top:-100px;
}

.box3 {
    color: palegreen;
    font-size: 20px;
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: red;
}

input {
    width: 300px;
    height: 30px;
    background-color: rgb(140, 231, 186);
}

.box5{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    top: 0;
    right: 100px;
}
.grandfather{
    width: 500px;
    height: 500px;
    background-color: rgb(243, 172, 172);
    padding: 50px;
    position: relative;
}
.father{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    position: relative;
}
.son{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    bottom: 0;
    right: 0;
}
.box6{
    width: 100px;
    height: 100px;
    background-color: #fff;
    color: black;
}
.box7{
    width: 50px;
    height: 100px;
    background-color: rgb(122, 87, 216);
    position: fixed;
    bottom: 0;
    right: 0;
}